<%--
  Created by IntelliJ IDEA.
  User: zhouh
  Date: 2022/6/8
  Time: 8:41
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="/static/layui/layui.js"></script>
    <link rel="stylesheet" href="/static/layui/css/layui.css">
</head>
<body>
<form id="deptList" lay-filter="test">

</form>
<script>
    layui.use(['table', 'form', 'jquery'], function () {
        var table = layui.table;
        var form = layui.form;
        $ = layui.$;
        table.render({
            elem: '#deptList',
            height: 500,
            url: '/userOperate?mothed=showOption',
            toolbar: '#toolbarDemo',
            page: 5,
            limit: 5,
            autoSort: false,
            limits: [5, 10, 15, 20, 25, 30, 100, 200],
            cols: [[ //表头
                {field: 'deptid', title: '部门编号', width: 120, sort: true, fixed: 'left'},
                {field: 'deptname', title: '部门名称', width: 100, sort: true},
                {field: 'location', title: '位置', width: 100},
            ]]
        })

        table.on('sort(test)', function (obj) { //注：sort 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            console.log(obj.field); //当前排序的字段名
            console.log(obj.type); //当前排序类型：desc（降序）、asc（升序）、null（空对象，默认排序）
            console.log(this); //当前排序的 th 对象

            //尽管我们的 table 自带排序功能，但并没有请求服务端。
            //有些时候，你可能需要根据当前排序的字段，重新向服务端发送请求，从而实现服务端排序，如：
            table.reload('deptList', {
                initSort: obj //记录初始排序，如果不设的话，将无法标记表头的排序状态。
                , where: { //请求参数（注意：这里面的参数可任意定义，并非下面固定的格式）
                    field: obj.field //排序字段
                    , order: obj.type //排序方式
                }
            });

            //layer.msg('服务端排序。order by '+ obj.field + ' ' + obj.type);
        });
    })
</script>
</body>
</html>
